@import 'vxe-table/styles/variable.scss';

$animation-time: 0.1s;

// 局部修改变量
$vxe-font-size : 12px;
$vxe-font-size-mini: 12px;
$vxe-font-color : #515a6e;
$vxe-primary-color : #2d8eff;
// $vxe-font-family   : '微软雅黑 Regular',
// '微软雅黑',
// sans-serif;
$vxe-font-family : var(--global-font-family);

/*table height*/
$vxe-table-row-height-mini : 34px;
$vxe-header-row-height-mini: 34px;

/*table color*/
//$vxe-table-border-color                      : #f4f5f7;
$vxe-table-header-background-color : #fff;
$vxe-table-border-color : rgba(233, 233, 233, 1);
$vxe-table-background-color : #ffffff;
$vxe-table-row-hover-background-color : transparent; //非striped行的悬停颜色
$vxe-table-row-striped-background-color : var(--table-row-striped-bg-color); //striped行的颜色$vxe-table-row-hover-striped-background-color: rgb(245, 245, 245); //striped行的悬停颜色
$vxe-table-row-current-background-color : var(--table-row-current-bg-color) !important; //当前行的颜色
$vxe-table-row-hover-current-background-color: rgba(255, 188, 131, 0.22); //当前行的悬停颜色
$vxe-table-row-checkbox-checked-background-color : var(--table-row-checked-bg-color); //选中行的背景
$vxe-table-row-hover-cheched-background-color: rgba(255, 188, 131, 0.22);
//选中行的悬停背景
$vxe-table-background-color : var(--table-background-color); // table背景颜色

/*loading*/
$vxe-loading-background-color: transparent;

/*checkbox*/
$vxe-checkbox-border-width : 1px;
$vxe-checkbox-border-radius: 0.15em;


@import 'vxe-table/styles/default.scss';


.wy-grid .vxe-form .ivu-input:hover {
  border-bottom: 1px solid var(--default-hover-font-color) !important;
}

.wy-grid,
.wy-panel {

  .vxe-grid {
    height: 100%;
    color: #313131;
  }

  .vxe-grid--top-wrapper {
    height: calc(50% - 42px);
    position: relative;
    width: 100%;
  }

  .layout0 {
    .vxe-grid--top-wrapper {
      height: 0;
    }
  }

  .layout2 {
    .vxe-grid--top-wrapper {
      height: calc(100% - 42px);
    }
  }

  .layout3 {
    .vxe-grid--top-wrapper {
      height: 100%;
    }
  }

  .grid-search {
    margin: 9px 10px;
    float: left;

    input {
      border-radius: 15px;
      background-color: var(--baseGird-toolbar-search-input-bg-color);
      border: 1px solid #f5f5f5;
      padding: 0 12px;
    }

    .ivu-icon {
      margin-right: 8px;
    }
  }
}

.vxe-export--panel {
  table {
    tbody {

      tr:nth-child(2),
      tr:nth-child(3),
      tr:nth-child(5) {
        display: none;
      }
    }
  }
}

.common-toolbar {
  .o-toolbutton {
    float: left;
    margin: 5px 0;
  }

  .hamberg-btn {
    margin-left: 5px;
  }
}

.vxe-loading {
  transition: visibility 0s, opacity 0.3s ease 0.3s;
  opacity: 0;
  display: block;
  visibility: hidden;

  .vxe-loading--spinner {
    opacity: 0;
    transition: ease 0.3s;
  }

  &.is--visible {
    visibility: visible;
    opacity: 1;

    .vxe-loading--spinner {
      opacity: 1;
    }
  }
}

.vxe-table--filter-wrapper .vxe-table--filter-footer {
  padding: 10px 0.6em;
}

.vxe-table .vxe-cell--radio .vxe-radio--checked-icon:after {
  height: 4px;
  width: 4px;
  top: 5px;
  left: 5px;
}

.wy-grid {

  /* vxe-toolbar */
  .vxe-toolbar,
  .base-grid-toolbar {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border-bottom: #f1f1f1;
    height: 42px;
    z-index: 2;

    //自定义工具栏
    .vxe-buttons--wrapper {
      height: 100%;
      position: relative;
    }

    //默认工具栏
    .vxe-tools--operate {
      height: 100%;
      padding-right: 5px;

      .vxe-custom--wrapper {
        margin-left: 0;
      }

      button {
        padding: 6px 8px;
        border-radius: 15px;
        margin: 0 2px;
        transition: var(--animation-hover);
        background-color: #fff;
        border: 0;
        border-color: transparent !important;
        box-shadow: none !important;

        &:hover {
          color: var(--default-hover-font-color);
          background-color: var(--default-comp-hover-bgColor);
        }
      }

      .vxe-custom--option-wrapper {
        border-radius: var(--default-border-radius-base);
        box-shadow: var(--default-box-shadow-down);
        border: none;
      }
    }

    .vxe-custom--option-wrapper {
      padding: 5px 10px 5px 5px;
      right: 1px;

      li,
      button {
        border-radius: var(--default-border-radius-base);
      }

      li:hover {
        transition: var(--animation-hover);
        background-color: #f1f1f1 !important;
      }

      .btn--confirm {
        background-color: #19be6b;
        color: #fff;
        width: 48%;
        margin: 0 2% 0 0;
        height: 24px;
        line-height: 24px;
        padding: 0;
        float: left;

        &:hover {
          background-color: #19be6b;
          color: #fff;
        }
      }

      .btn--reset {
        width: 48%;
        margin: 0 0 0 2%;
        background-color: #f8f8f9;
        height: 24px;
        line-height: 24px;
        padding: 0;
        float: left;
      }
    }
  }
}

.vxe-table--header-wrapper {

  //filter的变换
  .vxe-cell--filter {
    display: none;
  }

  .vxe-cell--sort {
    display: none;
  }

  .filter--active {
    .vxe-cell--filter {
      display: block;

      i {
        color: var(--default-hover-font-color);
      }
    }
  }

  .sort--actived {
    .vxe-cell--sort {
      display: block;
    }
  }

  .vxe-header--column:hover {

    .vxe-cell--sort {
      display: block;
    }

    .vxe-cell--filter {
      display: block;
    }
  }

  .sort-filter-active {
    color: var(--default-hover-font-color) !important;
  }

  //icon
  .wy-icon {
    font-weight: normal;

    &.vxe-sort--asc-btn {
      font-size: 12px;
      height: 9px;
      width: 18px;
      line-height: 10px;
      top: 1px;
      left: 2px;
    }

    &.vxe-sort--desc-btn {
      font-size: 12px;
      width: 18px;
      height: 9px;
      top: 8px;
      line-height: 10px;
      left: 2px;
    }

    &.vxe-filter--btn {
      font-size: 13px;
    }
  }

  .vxe-required-icon {
    margin-top: 3px;
  }

  .vxe-cell {
    padding: 0 10px;

  }
}

/* vxe-pager */
.vxe-pager {
  background-color: var(--table-footer-bg-color) !important; // 尝试覆写到vxetable的样式变量库中实现 --必须修改

  .vxe-pager--wrapper {
    padding: 0 10px;
  }

  &.p--perfect {
    background-color: #fff;
  }

  span,
  input {
    border-radius: var(--default-border-radius-base);
  }

  .vxe-input--suffix {
    padding-top: 2px;

    .vxe-input--suffix-icon {
      font-size: 12px;
    }
  }

  .vxe-pager--sizes {
    width: 80px;
    margin-right: 5px;

    .vxe-select-option--wrapper {
      box-shadow: var(--default-box-shadow-down);
      border-radius: var(--default-border-radius-base);
      border: none;

      .vxe-select-option {
        transition: var(--animation-hover);
      }

      .vxe-select-option:hover {
        background-color: #f1f1f1;
      }

      .is--checked {
        background-color: #f0faff !important;
      }
    }
  }

  .vxe-input--inner,
  .vxe-pager--jump-prev,
  .vxe-pager--prev-btn,
  .vxe-pager--next-btn,
  .vxe-pager--jump-next,
  .vxe-pager--num-btn {
    transition: var(--animation-hover);

    &:not(.is--active):hover {
      background-color: var(--default-comp-hover-bgColor);
    }

    & {
      border: none;
      border-radius: 15px;
    }
  }

  .vxe-pager--btn-wrapper {
    .vxe-pager--num-btn {
      font-weight: normal;
    }

    .is--active {
      font-weight: 700;
    }
  }

  //icon
  .vxe-pager--btn-icon {
    font-size: 10px;
    font-weight: normal;
    display: block;
    margin: 1px 1px;
  }

  .vxe-pager--jump-icon {
    font-size: 10px;
    font-weight: normal;
    display: block;
    margin: 2px 1px;
  }

  .vxe-pager--goto {
    border-radius: var(--default-border-radius-base);
    padding: 0 5px;
  }
}

//  该样式导致固定列区域中鼠标不能上下滚动
// .vxe-table--footer-wrapper.body--wrapper,
// .vxe-table--body-wrapper.fixed-left--wrapper {
//   overflow: hidden;
// }

.vxe-table--footer-wrapper {
  .vxe-cell {
    word-break: normal;
    overflow: hidden;
  }
}

.vxe-table--body-wrapper {
  // overflow: visible;

  //选择框
  .col--selected:not(.col-checked) {
    box-shadow: none;
    border: 0;
    background-color: transparent;
  }

  //cell
  .vxe-cell {

    .ivu-select {
      height: $vxe-table-row-height-mini - 2;
    }

    .ivu-select-input {
      height: $vxe-table-row-height-mini - 2;
      line-height: $vxe-table-row-height-mini;
    }

    //输入框的样式
    .ivu-input-wrapper {
      .ivu-input {
        border-radius: 0 !important;
        transition: all 0s;
      }

      >input {
        height: $vxe-table-row-height-mini - 1;
        width: calc(100% + 22px);
        margin-left: -11px;
        padding: 0 10px;
        line-height: $vxe-table-row-height-mini - 1;
      }

      >.ivu-icon {
        height: 100%;
        width: 30px;
        margin-right: -10px;
        cursor: pointer;
        transition: var(--animation-hover);
        line-height: $vxe-table-row-height-mini;

        &:hover {
          color: var(--default-hover-font-color);
        }
      }

      .ivu-input-suffix {
        .ivu-icon {
          height: 100%;
          width: 100%;
          line-height: $vxe-table-row-height-mini;
        }
      }

      .ivu-input-icon-normal+.ivu-input {
        padding-right: 32px;
      }
    }

    // button[name="i18n-btn"]{
    //   &:hover {
    //     background-color: rgba(199, 199, 199, 0.4);
    //   }

    //   color           : var(--default-hover-font-color);
    //   background-color: transparent;
    //   border          : none;
    //   box-shadow      : none;
    //   cursor          : pointer;
    //   border-radius   : 0;
    //   float           : left;
    //   height          : 36px;
    //   width           : calc(100% + 20px);
    //   margin-left     : -10px;
    //   text-align      : center;

    //   span {
    //     text-decoration: underline;
    //   }
    // }

    // input[name="m2o-search"]{
    //   padding-right: 24px;
    // }

    // .ivu-input-wrapper{
    //   .ivu-icon-ios-search, .ivu-icon-ios-calculator, .ivu-icon-ios-create-outline{
    //     margin-right: -6px;
    //     font-size: 16px;
    //     line-height: 36px;
    //     height: 36px;
    //     transition: var(--animation-hover);
    //     cursor: pointer;
    //     &:hover{
    //       color: var(--default-hover-font-color);
    //     }
    //   }
    // }

    // .ivu-date-picker-editor{

    // }

    // .vxe-input.type--number {
    //   height: $vxe-table-row-height-mini;

    //   .vxe-input--extra-suffix {
    //     margin-right: -11px;

    //     .ivu-icon {
    //       font-size: 14px;
    //     }
    //   }

    //   input {
    //     border-radius: 0;
    //     height       : $vxe-table-row-height-mini;
    //     transition   : ease-in-out $animation-time;
    //   }
    // }
    .o-datepicker {
      width: calc(100% + 22px);
      position: relative;
    }

    .o-i18n-selector {
      width: calc(100% + 22px);
      margin-left: -11px;

      .ivu-auto-complete {
        input {
          width: 100%;
          margin: 0;
        }
      }

      .i18n-icon {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 30px;
        line-height: $vxe-table-row-height-mini;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .o-input-number {
      width: calc(100% + 22px);
      margin-left: -11px;

      .ivu-dropdown {
        width: 100%;
      }

      .ivu-dropdown-rel {
        .ivu-input {
          width: 100%;
          margin-left: 0;
        }

        .ivu-icon {
          margin-right: 0;
        }
      }

      .ivu-select-dropdown {
        width: auto;
      }
    }

    .ivu-select {
      .ivu-select-selection {
        height: $vxe-table-row-height-mini;
        width: calc(100% + 22px);
        margin-left: -11px;
        border-radius: 0;

        >div>span {
          height: $vxe-table-row-height-mini - 2;
          line-height: $vxe-table-row-height-mini - 2;
        }

        >div>input {
          top: 0 !important;
          padding: 0 30px 0 10px !important;
        }
      }

      .ivu-select-dropdown {
        min-width: 100% !important;

        .ivu-select-item {
          padding-left: 10px;
        }
      }
    }


    // .ivu-input-number {
    //   height     : 36px;
    //   width      : calc(100% + 20px);
    //   margin-left: -10px;

    //   &-focused {
    //     box-shadow: none;
    //   }

    //   &-input-wrap {
    //     height: 36px;
    //   }

    //   input {
    //     padding: 0 20px;
    //   }

    //   .ivu-input-number-handler {
    //     height: 18px;

    //     .ivu-input-number-handler-down-inner {
    //       bottom: 2px;
    //     }

    //     .ivu-input-number-handler-up-inner {
    //       top: 2px;
    //     }
    //   }
    // }

    .ivu-date-picker {
      width: calc(100% + 22px);
      margin-left: -11px;

      .ivu-input-suffix {
        .ivu-icon-ios-calendar-outline {
          line-height: $vxe-table-row-height-mini;
        }
      }

      input {
        width: 100%;
        margin: 0;
        padding: 0 30px 0 10px;
      }
    }
  }
}

.vxe-header--row {
  height: $vxe-header-row-height-mini;

  .col--group {
    border-bottom: 1px solid #ddd;
  }
}

/* vxe-form */
.vxe-form {
  padding: 0.3em 0;
  background-color: var(--form-bg-color); // 尝试覆写到vxetable的样式变量库中实现

  .vxe-form--item {
    padding: 0em 0.8em 0em 0;
  }

  .vxe-form--item-title {
    font-weight: 500;
  }

  //输入框的样式
  // .vxe-form--item-inner {
  //   height: 36px;
  // }

  //suffix icon
  .ivu-input-wrapper {
    >.ivu-icon {
      height: 30px;
      width: 30px;
      cursor: pointer;
      transition: var(--animation-hover);
      line-height: 30px;

      &:hover {
        color: var(--default-hover-font-color);
      }
    }

    .ivu-input-suffix {
      .ivu-icon {
        height: 30px;
        width: 30px;
        line-height: 30px;
      }
    }
  }

  .o-i18n-selector {
    .i18n-icon {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 30px;
      line-height: 30px;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .o-input-number {
    .ivu-dropdown {
      width: 100%;
    }
  }

  .ivu-input,
  .ivu-select-selection {
    height: 30px;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background-color: #fff;

    // border-color    : var(--border-color-light);
    // background-color: var(--input-bgcolor-light);
    &:focus {
      border-bottom: 1px solid var(--default-hover-font-color);
    }
  }

  .ivu-input[disabled],
  .ivu-select-disabled,
  .ivu-select-input[disabled],
  .ivu-select-selection {
    color: #515a6e;
    -webkit-text-fill-color: #515a6e;
  }

  .ivu-select-selection {
    span {
      height: 28px !important;
      line-height: 28px !important;
    }

    input {
      top: 0;
      height: 30px;
      line-height: 30px;
    }
  }

  .vxe-form--item-inner {
    padding: 0 8px;
  }
}

.wy-grid {

  .col--checkbox.col--selected {
    border: 0 !important;
  }

  .ivu-icon {
    transition: all 0s;
  }

  .ivu-icon-ios-close-circle {
    font-size: 12px;
  }

  .vxe-grid--toolbar-wrapper {
    z-index: 3;
  }

  /* vxe-table */
  .vxe-table {

    // z-index: 0;

    table {
      border-collapse: collapse
    }

    .vxe-header--column {
      border-right: 1px solid #ddd;
      //background-image: linear-gradient(rgba(233, 233, 233, 1), rgba(233, 233, 233, 1)), linear-gradient(rgba(233, 233, 233, 1), rgba(233, 233, 233, 1));
    }

    // .vxe-table--header-border-line {
    //   border-bottom: 1px solid #ddd;
    // }

    .vxe-resizable.is--line::before {
      background-color: #ccc;
    }

    .vxe-body--row {
      border-bottom: 1px solid rgba(233, 233, 233, 1);
    }

    .vxe-table--header-wrapper,
    .vxe-header--row {
      //background-color: #ebf4fd;
      background-color: var(--table-thead-bg-color);
    }

    &:after,
    &:before,
    .vxe-table--border-line:before,
    .vxe-table--border-line:after {
      border-color: #e7ecf5;
    }

    .vxe-table--filter-wrapper {
      border: none;
      border-radius: var(--default-border-radius-base);
      box-shadow: var(--default-box-shadow-down);
    }

    .row--current {
      .vxe-body--column {
        background-color: transparent !important;
        color: inherit !important;
      }
    }

    .col--ellipsis>.vxe-cell {
      max-height: 120px !important;

      img {
        max-height: 120px;
      }
    }
  }
}

// @media screen and (max-width: 1024px) {
//   .toolText {
//     display: none;
//   }
// }

// @media screen and (min-width: 1024px) {
//   .toolText {
//     display: block;
//   }
// }

/* vxe-table 的 css样式覆盖 */
.vxe-table,
.vxe-modal {
  .vxe-body--column.col--selected:not(.col--checked) {
    box-shadow: none;
    background-color: #fff;
  }
}

.vxe-table--context-menu-wrapper {
  z-index: 103 !important;
  box-shadow: var(--default-box-shadow-down);
  border: none;
  border-radius: var(--default-border-radius-base);

  .vxe-table--context-menu-clild-wrapper {
    box-shadow: var(--default-box-shadow-down);
    border: none;
    border-radius: var(--default-border-radius-base);
  }

  .vxe-context-menu--option-wrapper {
    li {
      border: 0;
      padding: 2px 0;
    }

    li:hover {
      transition: var(--animation-hover);
      background-color: #f1f1f1;
    }

    .link-active {
      background-color: #fff;
    }
  }
}

.vxe-modal--box {
  padding: 0 !important;
  border-radius: var(--default-border-radius-base) !important;
  box-shadow: var(--default-box-shadow-down) !important;
  border: 0 !important;

  .vxe-modal--header {
    padding: 6px 30px 8px 14px;
    font-size: 14px;
  }

  .vxe-modal--body {
    padding: 4px 14px 15px 14px !important;
  }

  .vxe-modal--zoom-btn {
    display: none;
  }

  .ivu-icon-ios-close {
    font-weight: bold;
    font-size: 28px !important;
    top: 4px !important;
  }

  input,
  .vxe-export--panel-column,
  button {
    border-radius: 0 !important;
    border: 1px solid var(--default-border-color);
  }

  li,
  button {
    transition: var(--animation-hover);
  }

  li:hover {
    background-color: #f1f1f1;
  }

  select {
    border: 0px !important;
    background-color: #fff;
    outline: 1px solid var(--default-border-color) !important;
    height: 24px;
  }

  table {
    border-collapse: separate;
    border-spacing: 5px 10px;
  }

  .vxe-radio input,
  .vxe-checkbox input {
    margin: 3px 2px;
  }
}

.vxe-table--context-menu-wrapper {
  box-shadow: var(--default-box-shadow-down);
  border: none;
  border-radius: var(--default-border-radius-base);
  padding: 0;

  .vxe-context-menu--option-wrapper {
    .link--active {
      background-color: none;
    }

    li {
      border: none;
      margin: 0;
      padding: 3px 0;
      transition: var(--animation-hover);

      .vxe-context-menu--link-prefix {
        top: 7px;
      }

      // .vxe-context-menu--link {
      //   width: var(--table-row-height);
      // }

      .vxe-context-menu--link-suffix {
        top: 12px;
      }
    }

    li:hover {
      background-color: #f1f1f1;
    }
  }

  .vxe-table--context-menu-clild-wrapper {
    box-shadow: var(--default-box-shadow-down);
    border: none;
    border-radius: var(--default-border-radius-base);
  }
}